<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1" />
<!--<link href="css/bootstrap.min.css" rel="stylesheet"/>-->
<!--<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>-->
<!--<script src="js/bootstrap.min.js" type="text/javascript"></script>-->
	<link rel="stylesheet" type="text/css" href="__CSS__/bootstrap.min.css" media="all">
	<link rel="stylesheet" type="text/css" href="__CSS__/daterangepicker.css" />
	<script type="text/javascript" src="__JS__/jquery-3.2.0.min.js"></script>
	<script type="text/javascript" src="__JS__/bootstrap.min.js"></script>

	<title>简报</title>
<style>
body,div,img, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, iframe {
	margin: 0;
	padding: 0;
	border:none;
	outline: none;
}
body{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}
.row-box-color{
	padding: 10px;
}
.content-box{
	width: auto;
	padding: 0 10px;
}
.flex-box{
	width: 100%;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
}
.flex-box>div{
	width: 50%;
}
h6{
	margin: 5px 0;
}
table,table div{
	font-size: 13px;
}
.remarks{
	width: 100%;
	margin-bottom: 10px;
	font-size: 12px;
	color: #7f7f7f;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
}
.remarks p{
	width: 50%;
}
</style>
</head>
<body>
	<!--<div class="row row-box-color">-->
	    <!--<div class="col-xs-4 "><h4>渠道数据</h4></div>-->
	    <!--<div class="col-xs-4 col-xs-offset-4"><h5>建单合计：<span style="color: #f00;">0</span></h5></div>-->
	<!--</div>-->
	<div class="content-box" style="margin-top: 10px;">

		<div class="choose_btn" style="margin: 10px 0;">

			<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample" style="width: 100%">
				查询
			</a>

			<div class="collapse" id="collapseExample">
				<div class="well well_">
					<!-- 输入id选择 -->
					<form method="post" action="">
						{eq name='$jingli' value='1'}
						<div class="form-group">
							<select class="form-control" name="ygroup" id="ygroup_id">
								<option value="">请选择邀约分组</option>
								{volist name='ygroup' id='dat'}
								<option value="{$dat.id}" {eq name="search['ygroup']" value="$dat.id"}selected="selected"{/eq} >{$dat.group_name}</option>
								{/volist}
							</select>
						</div>
						{/eq}
						{neq name='$jingli' value='3'}
						<div class="form-group" style="margin-top: 5px;">
							<select class="form-control" name="yykf" id="yykf">
								<option value="">请选择邀约员工</option>
								{volist name='yykf' id='dat'}
								<option value="{$dat.id}" {eq name="search['yykf']" value="$dat.id"}selected="selected"{/eq} >{$dat.username}</option>
								{/volist}
							</select>
						</div>
						{/neq}
						<!-- 时间段选择 -->
						<div  style=" cursor: pointer; width: 100%;margin-top: 5px;margin-bottom: 10px;" id="reportrange">
							<input type="text" name="time" id="time" value="{$search.time}" class="form-control" placeholder="请选择时间区间" style="height:35px;border:1px solid #e5e5e5;border-radius: 0px;outline: none;" />
						</div>

						<!-- 筛选 -->
						<button class="btn btn_choose" type="submit" style="outline: none;border:none;width: 100%;background-color: #00a7d0">开始查询</button>
					</form>
				</div>

			</div>
		</div>


		<table class="table table-bordered table-striped" style="margin-bottom: 10px;">
			<tbody>
				{eq name='$jingli' value='1'}
				</tr>
				<td>渠道数据</td>
				<td>
					<div class="flex-box">
						<div>建单量：<span style="color: #f00;">{$data.qdjd.all}</span>&nbsp;对</div>
						<!--<div><a href="{:url('yiyuan_Detail',['type'=>$type,'title'=>$title,'search_time'=>$search.time])}">点击查看详情>></a></div>-->
						<div><a href="{:url('yiyuan_Detail',['time'=>$search.time])}">点击查看详情>></a></div>
					</div>
				</td>
				{/eq}

				</tr>

			    </tr>
			        <td>预约明细</td>
			        <td>
			        	<div class="flex-box">
							{volist name='$data.yymx.detail' id='info'}
								<div>{$info.name}：<span style="color: #f00;">{$info.num}</span>&nbsp;对</div>
							{/volist}
			        	</div>
			        </td>
			    </tr>

			    <tr>
			        <td>预约场馆</td>
			        <td>
						<div>合计：<span style="color: #f00;">{$data.yycg.all}</span>&nbsp;对</div>
			        	<div class="flex-box">
			        		<!--<div>解放碑：<span style="color: #f00;">0</span>&nbsp;对</div>-->
							{volist name='$data.yycg.detail' id='info'}
								<div>{$info.name}：<span style="color: #f00;">{$info.num}</span>&nbsp;对</div>
							{/volist}
			        	</div>
			        </td>
			    </tr>

			    <tr>
			        <td>预约日期</td>
			        <td>
			        	<div class="flex-box">
							{volist name='$data.nextmonth.detail' id='info'}
								<div>{$info.name}：<span style="color: #f00;">{$info.num}</span>&nbsp;对</div>
							{/volist}
			        	</div>
			        </td>
			    </tr>

			    <tr>
			        <td>反馈客咨成功预约</td>
			        <td>
						<div>合计：( 总：<span style="color: #f00;">{$data.fkkz.all_all}</span>&nbsp;/ 成功：<span style="color: #f00;">{$data.fkkz.all}</span>&nbsp;)对</div>
						<div class="flex-box">
							{volist name='$data.fkkz.detail' id='info'}
							<div>{$info.name}：( <span style="color: #f00;">{$info.num_all}</span>&nbsp;/ <span style="color: #f00;">{$info.num}</span>&nbsp;)对</div>
							{/volist}
						</div>
			        </td>
			    </tr>

			    <tr>
			        <td>转介绍</td>
			        <td>
			        	<div class="flex-box">
			        		<div>客资：<span style="color: #f00;">{$data.zjs.all}</span>&nbsp;对</div>
			        		<div>成功预约：<span style="color: #f00;">{$data.zjs.cgyy}</span>&nbsp;对</div>
			        	</div>
			        </td>
			    </tr>

				<tr>
					<td>来电</td>
					<td>
						<div class="flex-box">
							<div>成功预约：<span style="color: #f00;">{$data.laidian.cgyy}</span>&nbsp;对</div>
						</div>
					</td>
				</tr>

			    <tr>
			        <td>拍摄明细</td>
			        <td>
						<div>合计：<span style="color: #f00;">{$data.cgps.all}</span>&nbsp;对</div>
						<div class="flex-box">
							{volist name='$data.cgps.detail' id='info'}
							<div>{$info.name}：<span style="color: #f00;">{$info.num}</span>&nbsp;对</div>
							{/volist}
						</div>
			        </td>
			    </tr>

			</tbody>
		</table>



	</div>
</body>

<script type="text/javascript" src="__JS__/moment.js"></script>
<script type="text/javascript" src="__JS__/daterangepicker.js"></script>
<script>
    $(function() {
        var start = moment().subtract(29, 'days');
        var end = moment();
        var time = $('#time');
        chushi(time);
        function chushi(name) {
            if (name.val() == ''){
                datetime(name);
                name.val("");
            }else{
                name.on('focus',function () {
                    var str = name.val();
                    if(str!=''){
                        var string = str.split('~')
                        start = string[0];
                        end = string[1];
                    }
                    datetime(name);
                });

            }
            name.on('cancel.daterangepicker',function(ev, picker) {
                name.val('');
            });
        }
        function datetime(name) {
            name.daterangepicker({
                language: 'zh-CN',                                      //这里需要修改
                startDate: start,
                endDate: end,
                // singleDatePicker:true,
                ranges: {
                    '今天': [moment(), moment()],
//                    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '本周': [moment().startOf('week').add(1,'days'),moment().endOf('week').add(1,'days')],
//                    '过去7天': [moment().subtract(6, 'days'), moment()],
//                    '过去30天': [moment().subtract(29, 'days'), moment()],
                    '当月': [moment().startOf('month'), moment().endOf('month')],
//                    '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    // '清除':  [qingchu(name)],
                },
                locale: {
                    direction:"ltr",
                    format: "YYYY-MM-DD",
                    separator: "~",
                    applyLabel: '确定',
                    cancelLabel: '清除',
                    fromLabel: '起始时间',
                    toLabel: '结束时间',
                    customRangeLabel: '自定义',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
                }

            });
        }
    });


	var ygroup_id = $('#ygroup_id');
	var yykf = $('#yykf');
    ygroup_id.change(function () {
        yykf.empty();
        $("<option value=''>"+'请选择邀约客服'+"</optinon>").appendTo( yykf );
        $.post("/mobile/index/getYykf", {ygroup_id:$(this).val()},function(data){
            if(data.code!=0){
                $.each(eval(data),function(i,n){
                    $("<option value='"+n.id+"'>"+n.username+"</optinon>").appendTo(yykf);
                });
            }
        });
    });
</script>
</html>
